<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-12 09:36:15
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.easy-out-manage.relative.h100
  div.container.overflow-y
    EnterpriseCenterTitle(:titleList="titleList")
    .mt4.px4
      el-form(ref="formRef", :model="form", :size="formSize", status-icon)
        el-row(:gutter="40")
          el-col(:span="6")
            el-form-item(label="易出ID", prop="id")
              el-input(v-model="form.id", placeholder="请输入", clearable)
          el-col(:span="6")
            el-form-item(label="易出编号", prop="goods_no")
              el-input(v-model="form.goods_no", placeholder="请输入", clearable)
          el-col(:span="6")
            el-form-item(label="易出名称", prop="name")
              el-input(v-model="form.name", placeholder="请输入", clearable)
          el-col(:span="6")
            el-form-item(label="行业类目", prop="category_id")
              el-select(
                v-model="form.category_id",
                placeholder="请选择",
                clearable,
                @change="categoryChange"
              )
                el-option(
                  v-for="item in categoryList",
                  :key="item.id",
                  :label="item.name",
                  :value="item.id"
                )

          el-col(:span="6")
            el-form-item(label="更新时间", prop="update_start_date")
              el-date-picker(
                v-model="form.update_start_date",
                type="date",
                format="YYYY-MM-DD",
                value-format="YYYY-MM-DD",
                placeholder="选择时间",
                :size="size",
                @change="updateChangeTime"
              )
          el-col(:span="6")
            el-form-item(label="创建时间", prop="create_start_date")
              el-date-picker(
                v-model="form.create_start_date",
                type="date",
                format="YYYY-MM-DD",
                value-format="YYYY-MM-DD",
                placeholder="选择时间",
                :size="size",
                @change="createChangeTime"
              )
          el-col(:span="6")
            el-form-item(label="状态", prop="is_canceled")
              el-select(
                v-model="form.is_canceled",
                placeholder="请选择",
                clearable,
                @change="typeChange"
              )
                el-option(
                  v-for="item in canceledList",
                  :key="item.value",
                  :label="item.name",
                  :value="item.value"
                )
          el-col(:span="6")
            el-form-item(label="下架原因", prop="reason")
              el-select(
                v-model="form.reason",
                placeholder="请选择",
                clearable,
                @change="reasonChange"
              )
                el-option(
                  v-for="item in reasonList",
                  :key="item.value",
                  :label="item.name",
                  :value="item.value"
                )
          el-col(:span="18")
          el-col(:span="6")
            .flex.justify-end
              el-button(type="primary", @click="onQueryChange") 查询
              el-button(@click="onQueryReset(formRef)") 重置
              el-button(type="primary", :icon="Plus", @click="onAdd") 新增
    .table.mt4.px4
      el-table(
        :data="tableData",
        :header-cell-style="tableHeaderStyle",
        :cell-style="tableCellStyle",
        empty-text="暂无数据",
        border,
        style="width: 100%"
      )
        el-table-column(prop="id", label="易出ID", width="74")
        el-table-column(prop="goods_no", label="易出编号", width="150")
        el-table-column(prop="easyImage", label="易入图片", width="150")
          template(v-slot="scope")
            el-image(
              :src="scope.row.image"
              :zoom-rate="1.2"
              :preview-src-list="[scope.row.image]"
              :initial-index="0"
              :preview-teleported="true"
              fit="cover")
        el-table-column(prop="name", label="易出名称", width="128")
        el-table-column(prop="category", label="行业类目", width="90")
        el-table-column(prop="spec_quantity", label="规格数量", width="90")
        el-table-column(prop="min_price", label="最低价格", width="90")
        el-table-column(prop="max_price", label="最高价格", width="90")
        el-table-column(prop="updatetime", label="更新时间", width="117")
        el-table-column(prop="createtime", label="创建时间", width="117")
        el-table-column(prop="is_canceled", label="状态", width="100")
          template(v-slot="scope")
            el-switch(
              v-model="scope.row.is_canceled",
              :active-value="activeValue",
              :inactive-value="inactivevalue",
              @change="swticTypeChange(scope.row)"
            )
        el-table-column(prop="reason", label="下架原因", width="88")
          template(v-slot="scope")
            div(v-if="scope.row.reason") {{ scope.row.reason }}
        el-table-column(fixed="right", label="操作", width="150")
          template(v-slot="scope", #default)
            el-button(
              link,
              type="primary",
              size="small",
              @click="onEdit(scope.row)"
            ) 编辑
            el-button.overdue(
              link,
              type="primary",
              size="small",
              @click="onDelete(scope.row)"
            ) 删除
  //- 分页
  TablePagination(
    v-if="totalList > 0",
    :totalList="totalList",
    :page="form.page",
    @handleCurrentChange="handleCurrentChange")
  //- 新增&&编辑
  el-dialog(
    v-model="addEditVisible",
    width="1151",
    align-center,
    :show-close="false",
    :destroy-on-close="true",
    center
  )
    Add(
      :rowId="rowId",
      @cancel="addEditVisible = false",
      @confirm="onAddEditConfirm"
    )
  //- 删除
  el-dialog(
    v-model="deleteVisible",
    width="564",
    align-center,
    :show-close="false",
    :destroy-on-close="true",
    center
  )
    TableRowDelete(
      :rowId="rowId",
      @cancel="deleteVisible = false",
      @confirm="onDeleteConfirm"
    )
  //- 不文明提示
  el-dialog(
    v-model="nocivilizationVisible",
    width="564",
    align-center,
    :show-close="true",
    :destroy-on-close="true",
    center
    style="border-radius:12px"
  )
    .nocivilizationtittle {{ nocivilizationMsg }}
    .nocivilizationinfo(v-for="(item, index) in nocivilizationInfo") {{ index + 1 }}.{{ item.msg }}
      .infoMsg(v-for="(gitem, gindex) in item.words") {{ gitem }}
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import EnterpriseCenterTitle from "@/components/EnterpriseCenterTitle.vue";
import TableRowDelete from "@/components/TableRowDelete.vue";
import Add from "@/views/end/easy-out-manage/components/Add.vue";
import TablePagination from "@/components/TablePagination.vue";
import { Category } from "@/api/common";
import { DemandParams } from "@/api/entrymanagement";
import {
  GoodsSave,
  GoodsDeleteList,
  GoodSaveAdd,
  GoodSetIscanceled,
} from "@/api/outmanagement";

import { GoodsList } from "@/api/outmanagement";
const { proxy } = getCurrentInstance();
const titleList = ref([
  {
    name: "易出管理",
    value: "",
  },
]);
const activeValue = ref(1);
const inactivevalue = ref(2);
// 生命周期
onMounted(() => {
  getDemandParams();
  getGoodsList();
  getCategory();
});

//获取易出管理列表
const getGoodsList = () => {
  GoodsList(form.value).then((res) => {
    if (res.code == 1) {
      console.log("易出", res.data.data);
      tableData.value = res.data.data;
      totalList.value=res.data.total
      console.log('11111',totalList.value);
    }
  });
};

const categoryList = ref([]);
//获取行业类目
const getCategory = () => {
  Category().then((res) => {
    categoryList.value = res.data;
  });
};
const categoryChange = (val) => {
  console.log("val", val);
  form.value.category_id = val;
};

const canceledList = ref([]); //状态
//切换状态
const typeChange = (val) => {
  console.log("val", val);
  form.value.is_canceled = val;
};
//获取下拉列表参数
const getDemandParams = () => {
  DemandParams().then((res) => {
    if (res.code == 1) {
      canceledList.value = res.data.is_canceled.list;
      // completedList.value = res.data.is_completed.list;
      reasonList.value = res.data.reason.list;
      console.log("res", res.data);
    }
  });
};
const reasonList = ref([]); //下架原因
//下架
const reasonChange = (val) => {
  form.value.reason = val;
  console.log("dssf", val);
};

//时间选择 更新
const updateChangeTime = (val) => {
  form.value.update_start_date = val;
  form.value.update_end_date = val;
};

//创建时间
const createChangeTime = (val) => {
  console.log("z,vl", val);
  form.value.create_start_date = val;
  form.value.create_end_date = val;
};

const formRef = ref();
const form = ref({
  page: 1,
  page_size: 10,
  id: "", //易出id
  goods_no: "", //易出编号
  name: "", //易出名称
  category_id: "", //易出类目id
  update_start_date: "", //更新开始日期
  update_end_date: "", //更新结束日期
  create_start_date: "", //创建开始日期
  create_end_date: "", //创建开始日期
  is_canceled: "", //上架下架 状态：1=上架,2=下架
  reason: "", //下架原因
});
const tableHeaderStyle = ref({
  backgroundColor: "#E5E6EB",
  color: "#000000",
  textAlign: "center",
});
const tableCellStyle = ref({
  textAlign: "center",
});
const tableData = ref([]);
const rowId = ref("");
const addEditVisible = ref(false);
const deleteVisible = ref(false);
const nocivilizationVisible = ref(false);
// 状态颜色和文本
const initStatusColor = (status) => {
  return status == 1 ? "" : status == 2 ? "overdue" : "refund";
};
const initStatusText = (status) => {
  return status == 1 ? "进行中" : status == 2 ? "已逾期" : "已还款";
};

// 查询
const onQueryChange = () => {
  GoodsList(form.value).then((res) => {
    if (res.code == 1) {
      proxy.$message.success("查询成功");
      tableData.value = res.data.data;
    }
    // console.log("res", res.data.data);
  });
};
// 重置
const onQueryReset = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  getGoodsList();
};

//上架下架
const swticTypeChange = (row) => {
  GoodSetIscanceled({ id: row.id })
    .then((res) => {
      if (res.code == 1) {
        ElMessage({ message: res.msg, type: "success" });
        getGoodsList();
      }
      if (res.code == 0) {
        ElMessage({ message: res.msg, type: "warning" });
      }
    })
    .catch((err) => {});
};

// 新增&&编辑&&删除
const onAdd = (row) => {
  rowId.value = "";
  addEditVisible.value = true;
};
const onEdit = (row) => {
  console.log("编辑", row.id);
  //商品goods_id
  rowId.value = row.id;
  addEditVisible.value = true;
};
const onDelete = (row) => {
  // console.log("删除", row.id);
  rowId.value = row.id;
  deleteVisible.value = true;
};

const nocivilizationInfo = ref([]);
const nocivilizationMsg = ref("");
const isFlag=ref(true)
// 新增&&编辑&&删除表单提交
const onAddEditConfirm = (value) => {
  if(!isFlag) return;
  isFlag.value=false;
  GoodSaveAdd(value)
    .then((res) => {
      if (res.code == 1) {
        ElMessage({ message: res.msg, type: "success" });
        getGoodsList();
        addEditVisible.value = false;
        isFlag.value=true;
      }
      if (res.code == 0) {
        console.log("失败", res);
        addEditVisible.value = true;
        ElMessage({ message: res.msg, type: "error" });
      }
      if (res.data.code == 402) {
        nocivilizationMsg.value = res.data.msg;
        nocivilizationInfo.value = res.data.data;
        addEditVisible.value = true;
        nocivilizationVisible.value = true;
      }
      if (res.data.code == 403) {
        nocivilizationMsg.value = res.data.msg;
        nocivilizationInfo.value = res.data.data;
        addEditVisible.value = true;
        nocivilizationVisible.value = true;
      }
    })
    .catch((err) => {
      // ElMessage({ message: err.msg, type: "error" });

      // addEditVisible.value = true;
        // nocivilizationVisible.value = true;
      // addEditVisible.value = false;
      // console.log('err',err);
    });
  console.log("新增&&编辑", value);
};
const onDeleteConfirm = () => {
  console.log("删除", rowId.value);
  GoodsDeleteList({ id: rowId.value }).then((res) => {
    if (res.code == 1) {
      ElMessage({ message: res.msg, type: "success" });
      getGoodsList();
      deleteVisible.value = false;
    }
  });
};

// 数据总条数
const totalList = ref(0);
const handleCurrentChange = (val) => {
  form.value.page = val;
  getGoodsList();
};

</script>

<style lang="stylus" scoped>
.nocivilizationtittle {
  background-color: #F5F5F5;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.87);
  line-height: 22px;
  padding: 10px;
}

.nocivilizationinfo {
  margin-top: 16px;
}

.infoMsg {
  margin-top: 16px;
  text-indent: 10px;
}

.img-size {
  width: 100px;
  height: 58px;
  border-radius: 10px 10px 10px 10px;
}

.easy-out-manage {
  .container {
    height: calc(100vh - 204px);
  }
  .overdue {
    color: #E84026 !important;
  }

  .refund {
    color: #2487E8;
  }

  .no-quota {
    margin-top: 200px;
  }
}
</style>
